<template>
	<view>
		<view class="vt1">
			<uni-row>
				<uni-col :span="2">
					<image src="../../static/提示.png" class="it1" ></image>
				</uni-col>
				<uni-col :span="22">
					<view class="vt2">
						<text class="tt1">对招宣知识的掌握程度以及理解分析信息和解决问题的能力，可以更好地武装头脑，指导实践推动工作。</text>
						
					</view>					
				</uni-col>
			</uni-row>
		</view>
		<uni-card class="ct1">
			<uni-row>   
				<uni-col :span="20">
					<view class="vt3">
						<text class="tt2">学情（“三考三促”）线上考试试卷</text>
					</view>
				</uni-col>
				<uni-col :span="4">
					<view class="vt4">
						<image src="../../static/未通过.png" class="it2"></image>
					</view>	
				</uni-col>
			</uni-row>
			<view>    
				<text class="tt3">开始日期：2023/03/29<br>
                                  考试年度：2022年<br>
                                  评卷人：QIANJIAXIN （10000）<br>
                                  考生：WANGDAQIANG（10001）<br>
                                  结束日期：2023/03/29<br>
                                  得分：{{score}}分</text>
			</view>
		</uni-card>
		<view class="vt5">
			<image src="../../static/bg.png" class="it3"></image>
			<text class="tt4">一.单选题</text>			
		</view>
		<view class="vt6">
			<text class="tt5">1.燃烧是一种热发光的（ ）</text>
			<view class="bt1" @click="startExam" :disabled="isDisabled">  
			    <text class="tt5">A、化学反应</text>  
			</view> 
			<view class="bt1" @click="correctAnswer" :disabled="isDisabled">
			    <text class="tt5">B、物理反应</text>  
			</view> 
			<view class="bt1" @click="startExam" :disabled="isDisabled">
			    <text class="tt5">C、广电反应</text>  
			</view> 
			<view class="bt1" @click="startExam" :disabled="isDisabled">
			    <text class="tt5">D、分解反应</text>  
			</view> 
		</view>
		<view class="vt7">
			<text class="tt5">2.燃烧过程中的化学反应十分复杂，有（  ），有分解反应。</text>
			<view class="bt1" @click="startExam" :disabled="isDisabled">  
			    <text class="tt5">A、氧化反应</text>  
			</view> 
			<view class="bt1" @click="correctAnswer2" :disabled="isDisabled2">
			    <text class="tt5">B、化合反应</text>  
			</view> 
			<view class="bt1" @click="startExam" :disabled="isDisabled">   
			    <text class="tt5">C、聚合反应</text>  
			</view> 
			<view class="bt1" @click="startExam" :disabled="isDisabled">
			    <text class="tt5">D、连锁反应</text>  
			</view> 
		</view>
		<view class="vt5">
			<image src="../../static/bg.png" class="it3"></image>
			<text class="tt4">二.多选题</text>			
		</view>
		<view class="vt6">
			<text class="tt5">1.生产力构成要素包括（   ）</text>
			<view class="bt1" @click="correctAnswer3" :disabled="isDisabled3">  
			    <text class="tt5">A、生产资料</text>  
			</view> 
			<view class="bt1" @click="correctAnswer4" :disabled="isDisabled4">
			    <text class="tt5">B、劳动对象</text>  
			</view> 
			<view class="bt1" @click="startExam" :disabled="isDisabled">
			    <text class="tt5">C、技术水平</text>  
			</view> 
			<view class="bt1" @click="startExam" :disabled="isDisabled">
			    <text class="tt5">D、劳动力</text>  
			</view> 
			<view class="bt1" @click="startExam" :disabled="isDisabled">
			    <text class="tt5">E、艺术价值</text>  
			</view> 
		</view>
		<view class="vt5">
			<image src="../../static/bg.png" class="it3"></image>
			<text class="tt4">三.填空题</text>			
		</view>
		<view class="vt8">  
		      <text class="tt5">1.曾子所著，专讲古代大学教育的是</text>  
		      <view class="container">  
		        <input type="text" class="input-style" placeholder="请输入内容" @input="   handleInput" />  
		      </view>  
		</view>  
	</view>
</template>
<!-- <button @click="correctAnswer">做对了一道题</button>  -->
<script>
	export default {
		data() {  
		    return {  
		      // 初始化分数为0  
		      score: 0,
			  isDisabled: false, 
			  isDisabled2: false,
			  isDisabled3: false,
			  isDisabled4: false,
		    }  
		  },  
		methods: {  
		    // 当用户做对一道题时调用的方法  
		    correctAnswer() {  
		          if (!this.isDisabled) {  
		            this.score++;  
		            console.log('正确答案被点击了', '当前分数:', this.score);  
		            this.isDisabled = true; // 禁用所有按钮  
		          }  
		        },   
			correctAnswer2() {
			      if (!this.isDisabled2) {  
			        this.score++;  
			        console.log('正确答案被点击了', '当前分数:', this.score);  
			        this.isDisabled2 = true; // 禁用所有按钮  
			      }  
			    },   
			correctAnswer3() {
			      if (!this.isDisabled3) {  
			        this.score++;  
			        console.log('正确答案被点击了', '当前分数:', this.score);  
			        this.isDisabled3 = true; // 禁用所有按钮  
			      }  
			    },       
			correctAnswer4() {
			      if (!this.isDisabled4) {  
			        this.score++;  
			        console.log('正确答案被点击了', '当前分数:', this.score);  
			        this.isDisabled4 = true; // 禁用所有按钮  
			      }  
			    },
			handleInput(event) {  
			      // 处理填空题输入  
			      const inputValue = event.target.value;  
			              
			            // 验证输入是否为“大学”  
			            if (inputValue.trim() === '大学') {  
			              // 如果输入正确，则增加一分  
			              this.score++; 
	            }		 
			}  		
		}    
	}	  
</script>

<style>
	.vt1{
		height: 58px;
		background: #FFF5E6;
	}
	.it1{
		width: 16px;
		height: 16px;
		
		margin-top: 13px;
		margin-left: 12px;
	}
	.tt1{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #FF7700;
		letter-spacing: 0;
		line-height: 20px;
	}
	.vt2{
		margin-top: 5px;
	}
	.ct1{
		height: 182px;
		background: #FFFFFF;
		box-shadow: 0 3px 6px 0 #c9cfd980;
		border-radius: 8px;
		position: relative; 
	}
	.tt2{
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 16px;
		color: #000000;
		letter-spacing: 0;
	}
	.it2{
		width: 44px;
		height: 36px;
		
	}
	.vt4{
		position: absolute;  
		top: 0;  
		right: 0; 
	}
	.vt5{
		margin-top: 25px;
		position: relative;  	  
		margin-bottom: 16px;
	}
	.it3{
		width: 98px;
		height: 30px;
		position: absolute;  
		top: 0;  
		left: 0;  		 		 
		
	}
	.tt4 {  
	  position: absolute;  
	  margin-left: 15px;
	  margin-top: 4px ;
	
	  font-family: PingFangSC-Medium;
	  font-weight: 500;
	  font-size: 16px;
	  color: #FFFFFF;
	  letter-spacing: 0;
	} 
	.vt6{
		margin-top: 71px;
		margin-bottom: 10px;
		margin-left: 16px;
	}
	.tt5{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.bt1{
		margin-top: 10px;
	}
	.vt7{
		margin-top: 20px;
		margin-bottom: 10px;
		margin-left: 16px;
	}
	.input-style{
		
		background: #FFFFFF;
		border: 1px solid #E7EDFB;
		border-radius: 4px;
	}
	.vt8{
		margin-top: 71px;
		margin-bottom: 50px;
		margin-left: 16px;
	}
	.container{
		margin-bottom: 50px;
		
	}
</style>